import styled from 'styled-components'
import topbg from '@a/images/home/topbg.png'
import ellipsis from '@a/styled/ellipsis'

const Container = styled.div `
    width:100%;
    height:2.5rem;
    background-image:url(${topbg}); 
    background-repeat:no-repeat;
    background-size: 100% 2rem;
`

const Header = styled.div `
    width:100%;
    height:.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    span{
        color:#fff;
    }
    img{
        width:.24rem;
    }
`

const SwiperWrap = styled.div `
    height:0;
    font-size: 0;
    padding-bottom: 52%;
    position:relative;
    img{
        width:100%;
        display:inline-block;
        border-radius:.15rem;

    }
    .slider.am-carousel{
        position: static !important;
    }
`

const NoticeWrap = styled.div `
    height:.5rem;
    margin:-.1rem .24rem;
    background-color:#fff;
    border-radius:.06rem;
    box-shadow: #eee 0px 0px 9px 3px;
    display: flex;
    flex:1;
    align-items: center;
    justify-content: center;
    img{
        width:.32rem;
        margin-right:.06rem;
    }
    span{
        font-size:.14rem;
        color:#666;
    }
`

const WorkWrap = styled.div `
    width:100%;
    margin-top:.3rem;
    padding: 0 .24rem;
    ul{
        width:100%;
        display:flex;
        flex:1;
        li{
            width:50%;
            height:.8rem;
            background-color:#fff;
            border-radius:.06rem;
            display:flex;
            align-items: center;
            justify-content: center;
            &:last-child{
                margin-left:.12rem;
            }
            .work{
                width:.5rem;
                height:.5rem;
                border-radius:.5rem;
                display: flex;
                img{
                    width:.24rem;
                    height:.24rem;
                    margin:auto;
                }
            }
            span{
                font-size:.18rem;
                margin-left:.12rem;
            }
        }
    }
    
`

const NavWrap = styled.div `
    width:100%;
    padding: 0 .24rem;
    ul{
        display:flex;
        flex:1;
        flex-wrap:wrap;
        li{
            width:25%;
            margin-top:.3rem;
            display:flex;
            flex-direction:column;
            align-items: center;
            justify-content: center;
            .nav{
                display:flex;
                align-items: center;
                justify-content: center;
                width:.6rem;
                height:.6rem;
                border-radius:.12rem;
                img{
                    width:.3rem;
                }
            }
            span{
                font-size:.14rem;
                text-align:center;
                margin-top:.08rem;
            }
        }
    }
`

const RecommendWrap = styled.div `
    display:flex;
    flex:1;
    margin-top:.24rem;
    padding:0 .24rem;
    span{
        flex:1;
        font-size:.18rem;
    }
    div{
        display:flex;
        align-items: center;
        justify-content: center;
        img{
            width:.12rem;
            margin-right:.06rem;
        }
        span{
            flex:1;
            font-size:.14rem;
            color:#797979;
        }
    }
`

const ListWrap = styled.div `
    margin-top:.24rem;
    padding:0 .24rem;
    ul{
        width:100%;
        display:flex;
        flex-wrap:wrap;
    }
    li{
        width:50%;
        padding:0 .12rem;
        display:flex;
        flex:1;
        flex-wrap:wrap;
        align-items: center;
        div:first-child{
            height:0;
            padding-bottom:.8rem;
        }
        img{
            width:1.4rem;
        }
        h1{
            font-size:.14rem;
        }
        h3{
            font-size:.12rem;
            line-height:.3rem;
            color:#666;
        }
    }
`
const Subh1 = ellipsis(styled.h1 ``)
const Subh3 = ellipsis(styled.h3 ``)

const DetailsWrap = styled.div `
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:.24rem .12rem;
    .con{
        display:flex;
        margin-bottom:1rem;
    }
    .img{
        width:50%;
        img{
            width:1.5rem;
        }
    }
    .title{
        display:flex;
        flex-direction:column;
        justify-content: center;
        width:50%;
    }
    span{
        width:2rem;
        height:.4rem;
        color:#fff;
        line-height:.4rem;
        text-align:center;
        border-radius:.2rem;
        background-color:#5cbf5c;
    }
`


const PayWrap = styled.div `
    display:flex;
    flex-direction:column;
    align-items:center;
    h1{
        font-size:.4rem;
        color:#5cbf5c;
        margin:1rem 0;
    }
    span{
        width:2rem;
        height:.4rem;
        color:#fff;
        line-height:.4rem;
        text-align:center;
        border-radius:.2rem;
        background-color:#5cbf5c;
    }
`

export {
    Container,
    SwiperWrap,
    Header,
    NoticeWrap,
    WorkWrap,
    NavWrap,
    RecommendWrap,
    ListWrap,
    Subh1,
    Subh3,
    PayWrap,
    DetailsWrap
}